<template>
  <div class="add_con_form tl" v-loading="loading">
    <el-dialog :close-on-click-modal="false" :title="mytitle" :modal-append-to-body="false" :visible.sync="visible" :show="show"
        :before-close="closeDialog" @close="$emit('update:show', false)" class="tl size_13" width="800px">
      <el-form :model="data" :rules="dataYZ" ref="data" class="mar_top" label-width="120px">
        <el-form-item label="类型" prop="types">
          <el-col :span="12">
            <el-select v-model="data.types" placeholder="请选择" style="width: 100%;">
              <el-option label="商品" value="1"></el-option>
              <el-option label="酒店" value="2" v-if="
                  $store.state.plugin.hotel &&
                    $store.state.plugin.hotel.is_open == 1
                "></el-option>
              <el-option label="随手拍" value="3" v-if="
                  $store.state.plugin.sspj &&
                    $store.state.plugin.sspj.is_open == 1
                "></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="用户名" prop="uid">
          <el-col :span="12">
            <el-input placeholder="请选择用户" v-model="data.uid_cn" :disabled="true" clearable>
            </el-input>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzuser')">选择用户</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="产品名称" v-if="data.types == 1" prop="pid">
          <el-col :span="12">
            <el-input placeholder="请选择商品" v-model="data.pid_cn" :disabled="true" clearable>
            </el-input>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzShop')">选择商品</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="酒店名称" v-if="data.types == 2" prop="pid">
          <el-col :span="12">
            <el-input placeholder="请选择酒店" v-model="data.pid_cn" :disabled="true" clearable>
            </el-input>
          </el-col>
          <el-col :span="12" :offset="1">
            <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click="xzshop('xzHotel')">选择酒店</el-button>
          </el-col>
        </el-form-item>

        <el-form-item label="评论星级" prop="star">
          <el-col :span="12" class="star_review">
            <el-rate :value="data.star | toNumber" @change="changerate"></el-rate>
          </el-col>
        </el-form-item>

        <!-- <el-form-item label="评价时间">
                    <el-col :span="4">
                        <el-date-picker v-model="data.update_time"
                            type="datetime"
                            value-format="timestamp"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                </el-form-item> -->

        <el-form-item label="配图">
          <el-form class="clearfix" label-position="right" label-width="120px">
            <el-col :span="24" class="mar_bottom_20">
              <el-col :span="24">
                <uploadpic :file="fileList" :width="150" :height="150" :real_width="150" :real_height="150" :is_more="true" @send_pic="onSuccess"
                    @del_pic="del_pic"></uploadpic>
              </el-col>
            </el-col>
          </el-form>
        </el-form-item>

        <el-form-item label="评价内容" prop="content">
          <el-col :span="12">
            <el-input type="textarea" placeholder="" v-model="data.content" clearable>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="回复内容" prop="reply">
          <el-col :span="12">
            <el-input type="textarea" placeholder="" v-model="data.reply" clearable>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" size="medium" type="primary" @click.prevent="subForm('data')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <keep-alive>
      <component :is="current" :show="shows" :isAll="false" showType="list" @sendShop="getSend" @isshow="getShow"></component>
    </keep-alive>
  </div>
</template>

<style lang="less" scoped></style>

<script>
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import xzuser from "@/components/currency/xz_user.vue";
import xzShop from "@/components/currency/xz_shop.vue";
import xzHotel from "@/components/currency/xz_hotel.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  components: {
    compressimgUpload,
    xzuser,
    xzShop,
    uploadpic,
    xzHotel
  },
  data () {
    var checkTitle = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("标题不能为空"));
      } else {
        callback();
      }
    };

    return {
      fileList: [],
      pic_ar: [],
      mytitle: "",
      data: {
        id: "",
        uid: "",
        pid: "",
        uid_cn: "",
        pid_cn: "",
        update_time: "",
        star: 1,
        types: ""
      },
      loading: false,
      current: "",
      dataYZ: {
        types: [{ required: true, message: "请选择类型", trigger: "blur" }],
        uid: [{ required: true, message: "请选择用户", trigger: "blur" }],
        // pid: [{ required: true, message: "请选择商品", trigger: "blur" }],
        content: [{ required: true, message: "评价不能为空", trigger: "blur" }]
      },
      visible: this.show,
      dialogVisible: false,
      dialogImageUrl: "",
      showImg: true,
      updateUrl: "",
      fileList: [],
      shows: false
    };
  },
  props: {
    show: Boolean,
    editId: String,
    clickNum: Number
  },
  methods: {
    del_pic (index) {
      var id = this.fileList[index].id || "0";
      var params = {};
      this.fileList.splice(index, 1);
      params.id = id;
      this.$api.getShops.delReviewPic(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    xzshop (str) {
      if (str == "xzuser") {
      }
      this.current = str;
      this.shows = true;
    },
    getShow (val) {
      this.shows = val;
    },
    getSend (row) {
      if (this.current == "xzuser") {
        this.data.uid_cn = row.username;
        this.data.uid = row.id;
      } else {
        this.data.pid_cn = row.title;
        this.data.pid = row.id;
      }
    },
    changerate (e) {
      this.data.star = e;
    },
    onSuccess (pic) {
      this.fileList = this.fileList.concat(pic);
      this.showImg = true;
    },
    removeImg (file, fileList, row) {
      var id = file.id || "0";
      var params = {};
      params.id = id;
      this.$api.getShops.delReviewPic(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    closeDialog () {
      this.visible = false;
      this.fileList = [];
    },
    getDetails (id) {
      if (parseInt(id) > 0) {
        //查看
        var data = {};
        data["id"] = id;
        this.$api.getShops.reviewEdit(data).then(res => {
          console.log(res.data.result);
          var arr = res.data.result.pic_ar;
          this.pic_ar = res.data.result.pic_ar;
          for (var i in arr) {
            arr[i].url = arr[i].piclink;
          }
          this.fileList = arr;
          this.data = res.data.result;
          this.data.update_time = this.$fnc.vuetime(
            res.data.result.update_time
          );
        });
      } else {
        //添加
        this.fileList = [];
        for (var i in this.data) {
          this.data[i] = "";
        }
      }
    },
    subForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.fileList);
          if (this.editId == 0) {
            this.AddNews(formName);
            return false;
          } else {
            this.UpdateNews(formName);
          }
        }
      });
    },
    AddNews () {
      this.$api.getShops.reviewSaveAdd(this.data).then(res => {
        if (res.data.code == 200) {
          this.data.id = res.data.result;
          console.log("新生成ID:" + this.data.id);
          this.AddImg();
          this.$fnc.alertSuccess({ text: "添加成功" });
          this.$emit("parent", "这里刷新父页面");
          this.visible = false;
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    AddImg () {
      var imgArr = [];
      for (var i in this.fileList) {
        if (!this.fileList[i].id) {
          //上传没有ID的
          imgArr.push(this.fileList[i].piclink);
        }
      }
      if (imgArr.length > 0) {
        var img_json = JSON.stringify(imgArr);
        console.log(img_json); //["resource/pic1.jpg","resource/pic2.jpg"]
        var params = {};
        params["img_json"] = img_json;
        params["rid"] = this.data.id;
        this.$api.getShops.updateReviewPic(params).then(res => {
          if (res.data.code == 200) {
            this.$emit("parent", "这里刷新父页面");
            this.$fnc.alertSuccess({ text: "编辑成功" }); //成功弹出框
            this.visible = false;
          } else {
            this.$fnc.alertError(res.data.result); //失败弹出框
          }
        });
      }
    },
    UpdateNews (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {};
          params["id"] = this.editId;
          params.uid = this.data.uid;
          params.pid = this.data.pid;
          params.uid_cn = this.data.uid_cn;
          params.pid_cn = this.data.pid_cn;
          params["update_time"] = this.$fnc.phptime(this.data.update_time);
          params["star"] = this.data.star;
          params["content"] = this.data.content;
          params["reply"] = this.data.reply;
          this.$api.getShops.reviewSaveEdit(params).then(res => {
            if (res.data.code == 200) {
              this.AddImg();
              this.$emit("parent", "这里刷新父页面");
              this.$fnc.alertSuccess({ text: "编辑成功" }); //成功弹出框
              this.visible = false;
            } else {
              this.$fnc.alertError(res.data.result); //失败弹出框
            }
          });
        }
      });
    }
  },
  watch: {
    show () {
      console.log(this.show);
      this.visible = this.show;
    },
    clickNum (id) {
      console.log("点击button次数", id);
      console.log("编辑ID=" + this.editId);
      if (this.editId == 0) {
        this.mytitle = "添加评价";
      } else {
        this.mytitle = "查看评价";
      }
      this.getDetails(this.editId);
    }
  },
  mounted () {
    // this.getDetails(this.$route.query.id);
  },
  created () { },
  updated () { }
};
</script>
